import { StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { FlatList, Spinner, Text } from 'native-base'
import Loading from './Loading'

const LiuFlatList = (props) => {
  const { 
    data = [], 
    // 状态更新渲染FlatList列表
    status,
    renderItem: RenderItem, 
    ListHeaderComponent,
    ListFooterComponent = status ? <Loading status={status} /> : <Text style={{textAlign: 'center'}}>我是有底线的</Text>,
    onEndReached,
    numColumns=1,
    refreshing=false,
    onRefresh=null
  } = props
  return (
    <FlatList data={data} renderItem={
      ({ item, index }) => <RenderItem data={item} index={index}></RenderItem>
    }
      keyExtractor={item => item._id}
      extraData={status}
      columnWrapperStyle={numColumns > 1 && {
        justifyContent: 'space-between'
      }}
      ListHeaderComponent={ListHeaderComponent}
      ListFooterComponent={ListFooterComponent}
      onEndReached={onEndReached}
      numColumns={numColumns}
      refreshing={refreshing}
      onRefresh={onRefresh}
    >
    </FlatList>
  )
}

export default LiuFlatList

const styles = StyleSheet.create({})